<template>
  <div class="showPie day-charts" :class="{ show: show }">
    <chart-title v-if="showTitle" :show="show" @showChange="eventShowChange">
      {{ chartItem.name }}
    </chart-title>
    <div class="day-charts-area" v-show="show === true">
      <chart-cycle-list
        v-if="charts.length > 1"
        :cycleType="showChartType.cycleType"
        :cycleList="charts"
        @onCycleChange="eventCycleChange"
      ></chart-cycle-list>
      <div class="day-charts-time">
        <div class="day-charts-tip">
          <span class="run" v-if="statusDataRun.length">
            运行: {{ statusTime(statusDataRun) }}
          </span>
          <span class="run" v-if="statusDataNormal.length">
            正常: {{ statusTime(statusDataNormal) }}
          </span>
          <span class="stop" v-if="statusDataStop.length">
            停止: {{ statusTime(statusDataStop) }}
          </span>
          <span class="fault" v-if="statusDataFault.length">
            故障: {{ statusTime(statusDataFault) }}
          </span>
          <span class="offline" v-if="statusDataOffline.length">
            离线: {{ statusTime(statusDataOffline) }}
          </span>
        </div>
        <div class="day-charts-body">
          <div
            class="day-charts-item"
            v-for="(item, index) in chartSourceData"
            :class="{
              run: item.vediooName === '运行' || item.vediooName === '正常',
              stop: item.vediooName === '停止',
              fault: item.vediooName === '故障',
              offline: item.vediooName === '离线'
            }"
            :key="index"
            :style="timePercentage(item)"
          ></div>
        </div>
        <div class="day-charts-bottom">
          <span>{{ startTime.format("HH:mm:ss") }}</span>
          <span>{{ endTime.format("HH:mm:ss") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ChartDataMixin } from "./mixin.js";

export default {
  name: "ChartTime",
  data() {
    return {};
  },
  mixins: [ChartDataMixin],
  computed: {
    chartSourceData() {
      if (
        this.chartData.dataset &&
        this.chartData.dataset.source &&
        this.chartData.dataset.source.length
      ) {
        return this.chartData.dataset.source;
      }
      return [];
    },
    statusDataRun() {
      return this.chartSourceData.filter(e => e.vediooName === "运行");
    },
    statusDataNormal() {
      return this.chartSourceData.filter(e => e.vediooName === "正常");
    },
    statusDataStop() {
      return this.chartSourceData.filter(e => e.vediooName === "停止");
    },
    statusDataFault() {
      return this.chartSourceData.filter(e => e.vediooName === "故障");
    },
    statusDataOffline() {
      return this.chartSourceData.filter(e => e.vediooName === "离线");
    }
  },
  methods: {
    initChart() {
      this.startTime = this.dayjs().subtract(1, "hour");
      this.endTime = this.dayjs();
    },
    eventDateChange(day) {
      if (day > 0) {
        if (
          this.startTime.add(1, "day").isAfter(this.dayjs().subtract(1, "day"))
        ) {
          this.$vux.toast.text("只能查看当天之前的数据");
          return;
        }
        this.startTime = this.startTime.add(1, "day");
        this.endTime = this.endTime.add(1, "day");
      } else {
        this.startTime = this.startTime.subtract(1, "day");
        this.endTime = this.endTime.subtract(1, "day");
      }

      let date = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.$emit("onDateChange", date);
    },
    timePercentage(item) {
      console.log("timePercentage");
      if (!item.data[1].value && !item.data[0].value) {
        return { width: "0%", left: "0%" };
      }

      let start = this.dayjs(item.data[0].value),
        end = this.dayjs(item.data[1].value);
        
      let width = (end.diff(start) / (1 * 3600 * 1000)) * 100;
      
      let left =
        // start.hour() * 3600 * 1000 +
        ((start.minute() * 60 * 1000 +
          start.second() * 1000 +
          start.millisecond()) /
          (1 * 3600 * 1000)) *
        // (24 * 3600 * 1000)) *
        100;
      return { width: width.toFixed(3) + "%", left: left.toFixed(3) + "%" };
    },
    statusTime(data) {
      let time = data.reduce((acc, cur) => {
        let index = 0;
        if (cur.data[1].value && cur.data[0].value) {
          index = Number.parseInt(
            this.dayjs(cur.data[1].value) - this.dayjs(cur.data[0].value)
          );
        }
        return acc + index;
      }, 0);
      let hh = this.getTime(time);
      return hh;
    },
    getTime(my_time) {
      let days = my_time / 1000 / 60 / 60 / 24;
      let daysRound = Math.floor(days);
      let hours = my_time / 1000 / 60 / 60 - 24 * daysRound;
      let hoursRound = Math.floor(hours);
      let minutes = my_time / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
      let minutesRound = Math.floor(minutes);
      let seconds =
        my_time / 1000 -
        24 * 60 * 60 * daysRound -
        60 * 60 * hoursRound -
        60 * minutesRound;
      // console.log('转换时间:', daysRound + '天', hoursRound + '时', minutesRound + '分', seconds.toFixed(0) + '秒');
      let time = "";
      if (daysRound > 0) {
        time =
          daysRound +
          "天" +
          hoursRound +
          "时" +
          minutesRound +
          "分" +
          seconds.toFixed(0) +
          "秒";
      } else if (hoursRound > 0) {
        time =
          hoursRound + "时" + minutesRound + "分" + seconds.toFixed(0) + "秒";
      } else if (minutesRound > 0) {
        time = minutesRound + "分" + seconds.toFixed(0) + "秒";
      } else if (seconds >= 0) {
        time = seconds.toFixed(0) + "秒";
      }
      return time;
    }
  }
};
</script>
<style lang=""></style>
